<template>
    <div class="qilin-headerNav qilin-py-1 qilin-px-2">
        <el-row>
            <el-col :span="12" class="qilin-headerNav-logo">
                <img src="@/assets/images/Qilin-web.png" alt="">
                <span class="qilin-ml-1">Qilin全栈管理系统</span>
                <el-icon v-if="!homePiniaStore.getIsCollapse" @click="collapseNav()"><Fold /></el-icon>
                <el-icon v-else @click="collapseNav()"><Expand /></el-icon>
            </el-col>
            <el-col :span="12" class="qilin-headerNav-user qilin-mt-1">
                <div class="qilin-headerNav-user-box">
                    <img src="https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                        alt="图片资源已删除"
                    >
                    <div class="qilin-headerNav-user-box-text qilin-py-0 qilin-pr-1 qilin-pl-2">
                        <p>Qilin</p>
                        <p class="qilin-mt-1">{{loginPiniaStore.userInfo.name}}</p>
                    </div>
                    <span class="qilin-headerNav-user-box-arrow">
                        <el-dropdown trigger="hover" @command="handleCommand">
                            <span class="el-dropdown-link">
                                <el-icon><CaretBottom /></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="info">作者信息</el-dropdown-item>
                                    <!-- <el-dropdown-item command="forgetPassword"
                                        :disabled="loginPiniaStore.userInfo.identify !== 'manager' "
                                    >修改密码</el-dropdown-item>
                                    <el-dropdown-item command="exit">退出</el-dropdown-item> -->
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import {loginPinia} from "@/store/login/index.js";
import {useRouter,useRoute} from "vue-router";
import Qilin from "qilin-utils";
import {homePinia} from "@/store/home/index.js";
const homePiniaStore=homePinia();
const router=useRouter();
const route=useRoute();
const loginPiniaStore=loginPinia();
const urlInfo=inject("urlInfo");

// 点击图标展开收缩事件监听
const collapseNav=()=>{
    const isCollapse=homePiniaStore.getIsCollapse;
    homePiniaStore.setIsCollapse(!isCollapse);
    homePiniaStore.setWidth(!isCollapse ? 4.571 : 14.286);
};
//点击下拉菜单对应事件监听
const handleCommand=(val)=>{
    console.log(val);
    switch(val){
        case "info":
            showUserInfo();
            break;
        case "exit":
            exit();
            break;
        case "forgetPassword":
            router.push("/forget");
            break;
    };
};
//点击个人信息事件监听
const showUserInfo=()=>{
    console.log(route);
    // if(this.$route.path !== "/info/message"){
    //     this.$router.push({
    //         path:"/info/message"
    //     });
    // };
};
//点击退出事件监听
const exit=()=>{
    ElMessageBox.confirm("确认退出系统吗？","温馨提示",{
        showCancelButton:true,
        closeOnClickModal:false,
        type:"warning"
    }).then(()=>{
        //清除token
        localStorage.removeItem("qilinToken");
        //重置Vux中state信息
        loginPiniaStore.clearUserInfo();
        //回到登录页面
        router.push("/login");
    }).catch(()=>{
        console.log("取消退出操作");
    });
};
</script>

<style lang="scss" scoped>
.qilin-headerNav{
    @include QilinWidthHeight(100%,4.286rem);
    min-width:42.857rem;
    background-color:$color-theme-common-dark;
    color:#fff;
    border-bottom:1px solid $color-theme-common-light;
    font-size:$size-text-default !important;
    >.el-row{
        height:100%;
        >.qilin-headerNav-logo{
            text-align:left;
            @include QilinFlex(row,nowrap,flex-start);
            >img{
                @include QilinWidthHeight($rem50,auto);
                border-radius:$radius-circle;
            }
            >span{
                font-weight:bolder;
                font-size:$size-text-large;
            }
            >i{
                font-size:$size-text-large;
                margin-left:$rem5;
            }
        }
        >.qilin-headerNav-user{
            float:right;
            >.qilin-headerNav-user-box{
                @include QilinFlex(row,nowrap,flex-end);
                >img{
                    @include QilinWidthHeight($rem40,$rem40);
                    border-radius:$radius-circle;
                }
                >.qilin-headerNav-user-box-text{
                    text-align:center;

                    >p:last-child{
                        color:#fff;
                        font-weight:bolder;
                    }
                }
                >.qilin-headerNav-user-box-arrow{
                    .el-dropdown-link{
                        color:#fff;
                        margin-left:6px;
                        border:0;
                        outline: 0;
                    }
                }
            }
        }
    }
}
</style>
